<template>
    <div class="car">
        <van-nav-bar title="购物车" />
        <van-checkbox-group v-if="carList.length || carStore.car.length" v-model="checkedResult"
            @change="checkedResultChange">
            <div class="car_item" v-for="(item, i) in carList">
                <van-checkbox :key="item" :name="item">
                    <van-image :src="carList[i].picture" radius="5" fit="cover" width="80" height="80" />
                    <div class="car_item_info">
                        <div class="car_item_name">{{ item.name }}</div>
                        <div class="car_item_spec">{{ item.spec }}</div>
                        <div class="car_item_price">￥{{ item.price }}</div>
                    </div>
                </van-checkbox>
                <van-stepper class="car_item_count" v-model="carStore.car.find((it) => item.id === it.id).count" />
            </div>
        </van-checkbox-group>
        <van-empty image="/src/assets/icons/cart_empty.png" :image-size="80" v-else description="购物车空空如也">
            <van-button round type="primary" to="/category">去逛逛</van-button>
        </van-empty>
        <van-submit-bar v-if="carList.length || carStore.car.length" :price="totalPrice * 100"
            :button-text="`结算(${totalCount})`" @submit="submit">
            <van-button color="linear-gradient(to right, #ff6034, #ee0a24)" round @click="delCar">删除</van-button>
        </van-submit-bar>
    </div>
</template>

<script setup>
import { ref } from "vue";
import { showSuccessToast, showToast, showFailToast } from "vant";
import { useCarStore } from "@/stores/car";
import { getCarListService } from "@/apis/car";
const carStore = useCarStore();
const checkedResult = ref([]);
const totalCount = ref(0);
const totalPrice = ref(0);
const checkedResultChange = (value) => {
    totalCount.value = value.length;
    totalPrice.value =
        checkedResult.value.length > 0
            ? checkedResult.value.reduce((acc, cur) => {
                return acc + cur.price * carStore.car.find((item) => item.id === cur.id).count;
            }, 0)
            : 0;
};
const carList = ref([]);
// 获取购物车商品列表
const getCarList = async () => {
    if (carStore.car.length === 0) {
        carList.value = [];
        return;
    }
    let ids = carStore.car.map((item) => item.id).join(",");
    const res = await getCarListService({ ids: ids });
    carList.value = res.data;
};
getCarList();
const submit = () => {
    showToast("功能暂未开放");
};
// 删除购物车商品
const delCar = () => {
    if (!checkedResult.value.length) {
        showFailToast("请选择要删除的商品");
        return;
    }
    let data = [];
    checkedResult.value.forEach((item) => {
        data.push(item.id);
    });
    // 删除carList中的数据
    carList.value = carList.value.filter((item) => {
        return !data.includes(item.id);
    });
    // 删除carStore中的数据
    carStore.removeCar(data);

    checkedResult.value = [];

    showSuccessToast("删除成功");
};
</script>
<style scoped>
.car {
    position: relative;
}

.van-submit-bar {
    bottom: 50px;
}

.car_item {
    padding: 10px;
    border-bottom: 1px solid #eee;
    position: relative;
}

:deep(.van-checkbox .van-checkbox__label) {
    display: flex;
    font-size: 14px;
    column-gap: 10px;
    width: 100%;
}

.car_item_price {
    font-size: 12px;
    color: #ee0a24;
}

.car_item_spec {
    font-size: 12px;
    color: #999;
}

.car_item_count {
    position: absolute;
    right: 10px;
    bottom: 10px;
}
</style>
